<template>
  <div class="table">
    <div class="container">
      <div class="handler-box">
        <el-input v-model="selectKey" size="mini"placeholder="请输入歌手名" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDiaLogVisible=true">添加歌手</el-button>
        <el-button type="danger" size="mini" @click="handlerDeleteAll">全部删除</el-button>
      </div>
    </div>
<!--    歌手列表-->
    <el-table size="mini" border style="width: 100%;height:600px" max-height="500" @selection-change="handlerSelectionChange" :data="data">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="歌手图片" width="110"  align="center">
        <template slot-scope="scope">
          <div class="singer-img">
            <img :src="scope.row.pic" style="width: 100%"/>
          </div>
          <el-upload action="#"
                     :http-request="upload"
                     accept="image/jpeg,image/jpg,image/png"
                     :before-upload="beforeUpload"
                     :on-success="handlerUpload"
          >
            <el-button size="mini" @click="getSingerId(scope.row)">更新图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column label="歌手" width="120" align="center" prop="name"></el-table-column>
      <el-table-column label="性别" width="50" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.sex==0">女</span>
          <span v-if="scope.row.sex==1">男</span>
          <span v-if="scope.row.sex==2">组合</span>
          <span v-if="scope.row.sex==3">未知</span>
        </template>
      </el-table-column>
      <el-table-column label="生日" width="120" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.birth.substr(0,10)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地区" width="100" align="center" prop="location"></el-table-column>
      <el-table-column label="简介" width="650" align="center" prop="introduction"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handlerEdit(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="handlerDelete(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total,prev,pager,next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="tableData.length"
                     @current-change="handlerChange"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="添加歌手"
        :visible="centerDiaLogVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="name" label="歌手名" size="mini">
          <el-input v-model="registerForm.name" placeholder="歌手名"></el-input>
        </el-form-item>
        <el-form-item label="性别" size="mini">
          <el-radio-group v-model="registerForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">组合</el-radio>
            <el-radio :label="3">不明</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="birth" label="生日" size="mini">
          <el-date-picker type="date" placement="选择日期" v-model="registerForm.birth" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item prop="location" label="地区" size="mini">
          <el-input v-model="registerForm.location" placeholder="地区"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" label="简介" size="mini">
          <el-input v-model="registerForm.introduction" placeholder="简介" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDiaLogVisible=false">取消</el-button>
        <el-button size="mini" @click="addSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="编辑歌手"
        :visible="editVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="name" label="歌手名" size="mini">
          <el-input v-model="editForm.name" placeholder="歌手名"></el-input>
        </el-form-item>
        <el-form-item label="性别" size="mini">
          <el-radio-group v-model="editForm.sex">
            <el-radio :label="0">女</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">组合</el-radio>
            <el-radio :label="3">不明</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="birth" label="生日" size="mini">
          <el-date-picker type="date" placement="选择日期" v-model="editForm.birth" style="width: 100%"></el-date-picker>
        </el-form-item>
        <el-form-item prop="location" label="地区" size="mini">
          <el-input v-model="editForm.location" placeholder="地区"></el-input>
        </el-form-item>
        <el-form-item prop="introduction" label="简介" size="mini">
          <el-input v-model="editForm.introduction" placeholder="简介" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="editVisible=false">取消</el-button>
        <el-button size="mini" @click="editSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除歌手"
        :visible="deleteVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除该歌手!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除全部歌手"
        :visible="deleteAllVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除全部歌手!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteAllVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteAll">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import COS from "cos-js-sdk-v5";
export default {
  name: "Singer",
  data(){
    return{
      id:'',
      centerDiaLogVisible:false,
      editVisible:false,
      deleteVisible:false,
      deleteAllVisible:false,
      //添加框
      registerForm:{
        name:'',
        sex:'',
        birth:'',
        location:'',
        introduction:'',
        pic:'https://galidata-1309989133.cos.ap-chengdu.myqcloud.com/gali-music%2Ficons%2F1.png'
      },
      //编辑框
      editForm:{
        id:'',
        name:'',
        sex:'',
        birth:'',
        location:'',
        introduction:''
      },
      //歌手列表
      tableData:[],
      tempData:[],
      selectKey:'',
      pageSize:5,
      currentPage:1,
      idx:'',
      multipleSelection:[] //哪些已经打勾了
    }
  },
  methods:{
    //添加歌手
   async addSinger(){
      //解构参数
      let {name,sex,birth,pic,location,introduction}=this.registerForm
      birth=birth.getFullYear()+'-'+(birth.getMonth()+1)+'-'+birth.getDate()
      let params=new URLSearchParams()
      params.append('name',name)
      params.append('sex',sex)
      params.append('pic',pic)
      params.append('birth',birth)
      params.append('location',location)
      params.append('introduction',introduction)
      let result=await this.$API.reqAddSinger(params)
      if (result.code==10000){
        await this.getData()
        this.centerDiaLogVisible=false
        this.$notify.success('添加歌手成功')
      }else {
        this.$notify.error('添加歌手失败')
      }
    },
    //弹出编辑页面
    handlerEdit(row){
     this.editVisible=true
      this.editForm={
       id:row.id,
        name:row.name,
        sex:row.sex,
        birth:row.birth,
        location:row.location,
        introduction:row.introduction,
      }
    },
    //保存编辑页面
    async editSinger(){
      //解构参数
      let {id,name,sex,birth,location,introduction}=this.editForm
      let date = new Date(birth);
      birth=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
      let params=new URLSearchParams()
      params.append('id',id)
      params.append('name',name)
      params.append('sex',sex)
      params.append('birth',birth)
      params.append('location',location)
      params.append('introduction',introduction)
      let result=await this.$API.reqUpdateSinger(params)
      if (result.code==10000){
        await this.getData()
        this.editVisible=false
        this.$notify.success('更新歌手成功')
      }else {
        this.$notify.error('更新歌手失败')
      }
    },
    //弹出删除窗口
    handlerDelete(id){
     this.idx=id
      this.deleteVisible=true
    },
  handlerDeleteAll(id){
    this.idx=id
    this.deleteAllVisible=true
  },
   async deleteSinger(){
     let result=await  this.$API.reqDeleteSinger(this.idx)
     if (result.code==10000){
       await this.getData()
       this.deleteVisible=false
       this.$notify.success('删除歌手成功')
     }else {
       this.$notify.error('删除歌手失败')
     }
    },
    //查询全部歌手
   async getData(){
     let result=await this.$API.reqShowAllSinger()
     if (result.code==10000){
       this.tempData=result.data
       this.tableData=result.data
     }else{
      this.$notify.error('系统异常')
     }
   },
    handlerSelectionChange(val){
      this.multipleSelection=val
    },
    deleteAll(){
     for (let item of this.multipleSelection){
       this.handlerDeleteAll(item.id)
       this.deleteSinger()
     }
     this.deleteAllVisible=false
     this.multipleSelection=[]
    },
    //更新前校验图片
    beforeUpload(file){
     const isJPG=(file.type==='image/jpeg')||(file.type==='image/png')
      if (!isJPG){
        this.$message.error('只支持上传 jpg / png  格式的图片')
        return false
      }
      const isLt2M=(file.size/1024/1024)<2
      if (!isLt2M){
        this.$message.error('上传图片大于2M')
        return false
      }
      return true
    },
    //更新图片
    upload(res) {
      const cos = new COS({
        SecretId: this.SecretId, // 身份识别ID
        SecretKey: this.SecretKey// 身份秘钥
      })
      let file='.'+res.file.name.split('.')[1]
      if (res.file) {
        //上传图片
        cos.putObject({
          Bucket: this.Bucket, /* 存储桶 */
          Region: this.Region, /* 存储桶所在地域，必须字段 */
          Key: this.Key+'/img/singerPic/'+res.file.uid+file, /* 文件名 */
          StorageClass: this.StorageClass, // 上传模式, 标准模式
          Body: res.file // 上传文件对象
        }, async (err, data) => {
          // 上传成功之后
          if (data.statusCode === 200) {
            this.$notify.success('文件上传成功')
            this.editForm.pic='https://'+data.Location
            let params=new URLSearchParams()
            params.append('id',this.id)
            params.append('pic',this.editForm.pic)
           let result=await this.$API.reqUpdateSingerPic(params)
            if (result.code==10000){
              await this.getData()
            }else {
              this.$notify.success('系统异常')
            }
          }
        })
      }
    },
    handlerUpload(){
      this.$notify.success('上传成功')
    },
    //分页跳转
    handlerChange(val){
     this.currentPage=val
    },
    getSingerId(scope){
     this.id=scope.id
    }
  },
  mounted() {
    this.getData()
    this.$store.dispatch('showTencent')
  },
  watch:{
    //监听输入框里面的内容，跟随变化
    selectKey(){
     if (this.selectKey==''){
       this.tableData=this.tempData
     }else {
           this.tableData=[]
           for (let item of this.tempData){
             if (item.name.includes(this.selectKey)){
               this.tableData.push(item)
         }
       }
     }
    }
  },
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    },
    ...mapState({
      SecretId:state => state.tencent.SecretId,
      SecretKey:state => state.tencent.SecretKey,
      Bucket:state => state.tencent.Bucket,
      Region:state => state.tencent.Region,
      Key:state => state.tencent.Key,
      StorageClass:state => state.tencent.StorageClass
    })
  }
}
</script>

<style scoped>
.handler-box{
  margin-bottom: 20px;
}
.singer-img{
  width: 100%;
  height: 60px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>
